<template>
  <el-container class="info-container">
    <el-main>
      <el-card shadow="never" class="info-container-card">
        <div class="info-container-card-inner">
          <div class="left-container">
            <vxe-toolbar>
              <template v-slot:buttons>
                <vxe-input v-model="searchParams.nameCn" size="small" placeholder="搜索员工" type="search" style="width:100%;" />
              </template>
            </vxe-toolbar>
            <el-card shadow="never" class="info-card">
              <el-scrollbar style="height:100%">
                <el-tree
                  ref="tree"
                  :data="departmentTreeList"
                  :props="defaultProps"
                  highlight-current
                  :check-on-click-node="true"
                  :expand-on-click-node="false"
                  default-expand-all
                  node-key="id"
                  :current-node-key="currentNodekey"
                  @node-click="handleNodeClick"
                />
              </el-scrollbar>
            </el-card>
          </div>
          <div class="center-container">
            <el-card shadow="never" class="info-card tableCard">
              <el-tabs size="small">
                <el-tab-pane size="small">
                  <span slot="label" style="font-size: 10px;">外部</span>
                  <vxe-input v-model="searchParams.nameCn" size="small" placeholder="搜索好友" type="search" style="width:100%;" />
                  <friends-list :friends-list="friendsList" @clickTab="switchFriendsTalk" />
                </el-tab-pane>
                <el-tab-pane size="small">
                  <span slot="label" style="font-size: 10px;">内部</span>
                  <vxe-input v-model="searchParams.nameCn" size="small" placeholder="搜索好友" type="search" style="width:100%;" />
                  <friends-list :friends-list="employeeList" @clickTab="switchFriendsTalk" />
                </el-tab-pane>
                <el-tab-pane size="small">
                  <span slot="label" style="font-size: 10px;">群聊</span>
                  <vxe-input v-model="searchParams.nameCn" size="small" placeholder="搜索群" type="search" style="width:100%;" />
                  <group-list :group-list="groupList" @clickTab="switchGroupTalk" />
                </el-tab-pane>
              </el-tabs>
            </el-card>
          </div>
          <div class="right-container">
            <el-card shadow="never" class="info-list tableCard">
              <el-tabs size="small">
                <el-tab-pane size="small">
                  <span slot="label" style="font-size: 10px;">全部</span>
                  <vxe-toolbar>
                    <template v-slot:buttons>
                      <vxe-input v-model="searchParams.nameCn" size="small" placeholder="搜索内容" type="search" style="width:100%;" />
                    </template>
                  </vxe-toolbar>
                  <el-main class="ov-hidden full-height no-padding" style="height: 450px;  border: 1px solid #f1efef;">
                    <talk-panel class="full-height" :params="talkParams" />
                  </el-main>
                </el-tab-pane>
                <el-tab-pane size="small">
                  <span slot="label" style="font-size: 10px;">文件</span>
                  <div v-for="item in talkParams.fileLists" :key="item.id">
                    <div class="message-box record-box">
                      <main class="main-column">
                        <div class="talk-content">
                          <file-message :file="item" :record_id="item.fileName" />
                        </div>
                      </main>
                    </div>
                  </div>
                </el-tab-pane>
                <el-tab-pane size="small">
                  <span slot="label" style="font-size: 10px;">图片</span>
                  <div v-for="item in talkParams.imageLists" :key="item.fileName">
                    <div class="message-box record-box">
                      <main class="main-column">
                        <div class="talk-content">
                          <image-message :src="item.filePath" />
                        </div>
                      </main>
                    </div>
                  </div>
                </el-tab-pane>
                <el-tab-pane size="small">
                  <span slot="label" style="font-size: 10px;">视频</span>
                  <div v-for="item in talkParams.videoLists" :key="item.fileName">
                    <div class="message-box record-box">
                      <main class="main-column">
                        <div class="talk-content">
                          <video-message :src="item.filePath" />
                        </div>
                      </main>
                    </div>
                  </div>
                </el-tab-pane>
                <el-tab-pane size="small">
                  <span slot="label" style="font-size: 10px;">语音</span>
                  <div v-for="item in talkParams.voiceLists" :key="item.fileName">
                    <div class="message-box record-box">
                      <main class="main-column">
                        <div class="talk-content">
                          <audio-message :src="item.filePath" />
                        </div>
                      </main>
                    </div>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </el-card>
          </div>
        </div>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
import { getDepartmentUnionEmployeeTreeList } from '@/api/cop/contact'
import { queryFriendsList, queryBySenderAndReceiverCode, queryGroupList, queryByGroupCode } from '@/api/cop/dataTalk'
import FriendsList from '@/components/FriendsList'
import GroupList from '@/components/GroupList'
import TalkPanel from '@/components/TalkPanel'
import FileMessage from '@/components/TalkPanel/components/FileMessage'
import ImageMessage from '@/components/TalkPanel/components/ImageMessage'
import AudioMessage from '@/components/TalkPanel/components/AudioMessage'
import VideoMessage from '@/components/TalkPanel/components/VideoMessage'
export default {
  components: {
    FriendsList,
    GroupList,
    TalkPanel,
    FileMessage,
    ImageMessage,
    VideoMessage,
    AudioMessage
  },
  data() {
    return {
      currentNodekey: '1',
      searchParams: {
        mainDepartmentId: '1',
        nameCn: '',
        status: '',
        pageNum: 1,
        pageSize: 20
      },
      loading: false,
      departmentTreeList: [],
      employeeList: [],
      friendsList: [],
      groupList: [],
      talkParams: {
        type: 0,
        code: '0',
        fileLists: [],
        imageLists: [],
        voiceLists: [],
        videoLists: [],
        dataTalkLists: []
      },
      props: {
        children: 'children',
        value: 'id',
        label: 'name',
        emitPath: false
      },
      defaultProps: {
        children: 'children',
        label: 'name',
        value: 'id'
      }
    }
  },
  created() {
    this.getDepartmentList()
  },
  methods: {
    clearList() {
      if (this.talkParams) {
        this.talkParams.dataTalkLists = []
        this.talkParams.fileLists = []
        this.talkParams.imageLists = []
        this.talkParams.videoLists = []
        this.talkParams.voiceLists = []
      }
    },
    handleNodeClick(data) {
      if (data && data.code !== null) {
        this.clearList()
        this.queryList(data.code)
      }
    },
    getDepartmentList() {
      getDepartmentUnionEmployeeTreeList({ parentId: '0' })
        .then(res => {
          if (res) {
            this.departmentTreeList = res
          }
        }).catch((err) => {
          console.log(err)
        })
    },
    queryList(empCode) {
      this.queryEmployeeList(empCode)
      this.queryFriendsList(empCode)
      this.queryGroupList(empCode)
    },
    queryEmployeeList(empCode) {
      queryFriendsList({ employeeCode: empCode, type: 1 })
        .then(res => {
          if (res) {
            this.employeeList = res
          }
        }).catch((err) => {
          console.log(err)
        })
    },
    queryFriendsList(empCode) {
      queryFriendsList({ employeeCode: empCode, type: 2 })
        .then(res => {
          if (res) {
            this.friendsList = res
          }
        }).catch((err) => {
          console.log(err)
        })
    },
    queryGroupList(empCode) {
      queryGroupList({ code: empCode })
        .then(res => {
          if (res) {
            this.groupList = res
          }
        }).catch((err) => {
          console.log(err)
        })
    },
    switchFriendsTalk(empCode, friendsCode) {
      queryBySenderAndReceiverCode({ senderCode: empCode, receiverCode: friendsCode, type: 2 })
        .then(res => {
          if (res) {
            this.talkParams = res
          }
        }).catch((err) => {
          console.log(err)
        })
    },
    switchGroupTalk(roomId) {
      queryByGroupCode({ groupCode: roomId })
        .then(res => {
          if (res) {
            this.talkParams = res
          }
        }).catch((err) => {
          console.log(err)
        })
    }
  }
}
</script>

<style lang="scss">
.info-container {
  .info-container-card {
    margin: -5px -40px -10px -10px;
    width: 100%;
  }
  .info-container-card-inner {
    margin: 1px 1px 1px 1px;
    display: flex;
    width:100%;
    .left-container {
      margin-right: 20px;
      .info-card {
        height: 500px;
        width: 250px;
        .el-scrollbar__wrap {
          overflow-y: auto;
        }
        .el-tree{
          height: 485px;
          min-width: 100%;
        }
      }
    }
    .center-container {
      margin-right: 20px;
      border: 1px solid #eeeeee;
      height: 548px;
      .info-card {
        background: #ffffff;
        height: 100%;
        width: 350px;
        overflow: hidden;
      }
    }
    .right-container {
      width: calc(100% - 580px);
      height: 548px;
      .info-list {
        margin-bottom: 20px;
        background: #ffffff;
        .el-card__body {
          padding:  0;
        }
      }
    }
  }
}
</style>
